import React, {Component} from 'react';
import styles from './index.module.css'
import {Carousel, Icon, WingBlank} from 'antd-mobile';
import {baseUrl} from "../../../../utiles/baseUrl";
import NavHeader from "../../../../components/NavHeader/NavHeader";
const rightContent = [<Icon key="1" type="ellipsis" />]
class CarouselComponent extends Component {
    render() {
       const {img,community} = this.props

        return (
            <div className={styles.root}>
                <NavHeader className={styles.navheader} rightContent={rightContent}>{community}</NavHeader>
                <WingBlank>
                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {img.map(val => (
                            <img
                                key={val}
                                src={baseUrl + val}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top', height: '176px',margin:0}}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        ))}
                    </Carousel>
                </WingBlank>
            </div>
        );
    }
}

export default CarouselComponent;
